<template>
        <div class="tableContainer">
          <h1>个人信息</h1>
          <table :border="1">
            <tr>
              <td rowspan="3" colspan="4">照片展示区 </td>
              <td v-for=" item in storeTableLabel.splice(0,2)" :key="item.label" :index="item.label">
              {{item.label}}
              </td>
              <!-- <td>姓名</td>
              <td>lss</td>
              <td>性别</td>
              <td>男</td> -->
            </tr>
            <tr>
              <td>年龄</td>
              <td>35</td>
              <td>入职时间</td>
              <td>2001-4-5</td>
            </tr>
            <tr>
              <td>学院</td>
              <td>计算机科学与技术学院</td>
              <td>职称</td>
              <td>普通教师</td>
            </tr>
            <tr>
              <th colspan="8">教学成果</th>
            </tr>
            <tr>
              <td colspan="5">课题</td>
              <td colspan="3">成果</td>
            </tr>
            <tr>
              <td colspan="5">软件工程导论</td>
              <td colspan="3">省级优秀课程</td>
            </tr>
            <tr>
              <th colspan="8">科研成果</th>
            </tr>
            <tr>
              <td colspan="5">课题</td>
              <td colspan="3">成果</td>
            </tr>
            <tr>
              <td colspan="5">基于xx的xx系统</td>
              <td colspan="3">互联网+国奖</td>
            </tr>
          </table>
        </div>
</template>

<script>
export default {
  // 组件名称
  name: 'commonExcel',
  data() {
    return {
         storeTableLabel: [
        {
          value: 'lss',
          label: '姓名',
        },
        {
          value: 'sex',
          label: '性别',
        },
        {
          value: 'age',
          label: '年龄',
        },
        {
          value: 'birth',
          label: '入职时间',
        },
        {
          value: 'addr',
          label: '学院',
        },
        {
          value: 'rank',
          label: '职称',
        },
        {
          value: 'teachArch',
          label: '教学成果',
        },
        {
          value: 'scArch',
          label: '科研成果',
        },
      ],
    }
  },
}
</script> 

<style scoped lang='less'>
  .tableContainer{
    h1{
      text-align: center;
      padding-bottom: 20px;
    }
    table{
      margin: 0 auto;
          tr{
      height: 75px;
      td{
        width: 135px;
        text-align: center;
        font-weight: 500;
      }
    }
    }
  }
</style>
